<template>
  <div>
    <ul class="nav">
      <li v-for="(item,index) in navList" :key="index" :class="{active:tabIndex==index}" @click="changeIndex(index,item.tab)">{{item.name}}</li>
    </ul>
    <div class="list">
      <div class="cell" v-for="(item,index) in list" :key="index">
        <div>
          <img :src="item.author.avatar_url" alt="">
          <span :class="[
                  {put_good:(item.good === true)},
                  {put_top:(item.top === true)},
                  {'topiclist-tab':(item.good !== true && item.top !== true)}
                  ]">
            {{ item | tabFormatter}}
          </span>

        </div>
        <div>
          <div class="title" @click="goDetail(item.id)">{{item.title}}</div>
          <div class="reply_count_padding">
            <span class="reply_count"> {{ item.reply_count}}</span>
            / {{ item.visit_count}}
          </div>
        </div>
        <span>{{item.last_reply_at | formDate}}</span>

      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      navList: [
        {
          name: "全部",
          tab: "all"
        },
        {
          name: "精华",
          tab: "good"
        },
        {
          name: "分享",
          tab: "share"
        },
        {
          name: "问答",
          tab: "ask"
        },
        {
          name: "招聘",
          tab: "job"
        }
      ],
      list: [],
      tabIndex: "",
      tab: ""
    };
  },
  methods: {
    getData() {
      this.$axios
        .get("https://cnodejs.org/api/v1/topics", {
          params: {
            limit: 40,
            tab: this.tab
          }
        })
        .then(res => {
          console.log(res);
          this.list = res.data.data;
        });
    },
    changeIndex(index, value) {
      console.log(index);
      this.tabIndex = index;
      this.tab = value;
      this.getData();
    },
    goDetail(id) {
      console.log(id);
      this.$router.push({ name: "Detail", params: { id: id } });
    }
  },
  created() {
    this.getData();
  },
  filters: {
    tabFormatter(item) {
      if (item.good == true) {
        return "精华";
      } else if (item.top == true) {
        return "置顶";
      } else if (item.tab == "ask") {
        return "问答";
      } else if (item.tab == "share") {
        return "分享";
      } else {
        return "招聘";
      }
    },
    formDate(str) {
      if (!str) return "";
      var date = new Date(str);
      var time = new Date().getTime() - date.getTime(); //现在时间-传入时间=相差时间
      if (time < 0) {
        return "";
      } else if (time / 1000 < 30) {
        return "刚刚";
      } else if (time / 1000 < 60) {
        return parseInt(time / 1000) + "秒前";
      } else if (time / 60000 < 60) {
        return parseInt(time / 60000) + "分钟前";
      } else if (time / 3600000 < 24) {
        return parseInt(time / 3600000) + "个小时前";
      } else if (time / 86400000 < 31) {
        return parseInt(time / 84600000) + "天前";
      } else if (time / 2592000000 < 12) {
        return parseInt(time / 2592000000) + "个月前";
      } else {
        return parseInt(time / 31536000000) + "年前";
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.nav {
  width: 7.304rem;
  height: 1.2rem;
  background-color: #ffffff;
  margin: auto;
  margin-top: 0.6rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #80bd01;

  .active {
    background-color: #80bd01;
    color: #fff;
    padding: 0.06rem 0.08rem;
    border-radius: 0.06rem;
  }
}

.cell {
  width: 7.304rem;
  height: 1.004rem;
  background-color: #ffffff;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;

  img {
    width: 0.6rem;
    height: 0.6rem;
  }

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 4rem;
    line-height: 0.6rem;
  }
}

.put_good, .put_top {
  background: #80bd01;
  padding: 0.04rem 0.08rem;
  border-radius: 0.06rem;
  color: #fff;
  font-size: 0.24rem;
  margin-right: 0.2rem;
}

.topiclist-tab {
  background-color: #e5e5e5;
  color: #999;
  padding: 0.04rem 0.08rem;
  border-radius: 0.06rem;
  font-size: 0.24rem;
  margin-right: 0.2rem;
}
</style>
